<template>
  <div class="login-container">
    <div class="login-header">
      <img src="@/img/c1.png" alt="Logo" class="logo">
    </div>
    <h2 style="margin-left:30vw">用户登录</h2>

    <el-form class="login-form">
      <el-form-item>
        <el-input v-model="loginForm.username" placeholder="用户名" prefix-icon="el-icon-user"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" v-model="loginForm.password" placeholder="密码" prefix-icon="el-icon-lock"></el-input>
      </el-form-item>
      <br>
      <el-form-item>
        <el-button  type="primary" @click="onLogin" class="login-button">登录</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="sign" class="t3">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>

import {ref} from "vue";
import router from "@/router/index.js";
import axios from "axios";
import ip from "@/router/ip.js";
import {ElMessage} from "element-plus";

let loginForm=ref({
  username: '',
  password: ''
});

let onLogin=async () => {

 let {data}= await axios.get(ip+"login",{
    params:loginForm.value,
  });

  if(data!==""&&data!==null){
    localStorage.setItem("user",JSON.stringify(data))
    await router.push("/home/index")
  }else{
    ElMessage({
      message: "当前账号密码不存在",
      type: 'error',
      plain: true,
    })
  }


}

let sign=()=>{
  router.push("/sign")
}

</script>

<style scoped>
.login-container {
  padding: 20px;
  max-width: 400px;
  margin: 100px auto;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: white;
  position: relative;
  overflow: hidden;
}

.login-header {
  text-align: center;
  margin-bottom: 20px;
}

.logo {
  width: 80px;
  height: 80px;
}

.el-input {
  border-radius: 20px;
}

.login-button {
  width: 100%;
  border-radius: 20px;
  background-image: linear-gradient(to right, #7367F0, #CE9FFC);
  border: none;
}



.t3 {
  width: 100%;
  border-radius: 20px;
  background-image: linear-gradient(to right, #67f087, #fc9fb8);
  border: none;
}
</style>